<script setup lang="ts">
import uploadOne from "@/components/upload/uploadOne.vue";
import uploads from "@/components/upload/uploads.vue";
import { reactive, getCurrentInstance } from "vue";
import editor from "./edit/editor.vue";
const model = defineModel({
  default: {
    /** 
     *  {
      prop: "zs_msg",
      type: "table",
      label: "证书信息",
      table: {
        columns: [
          {
            label: "发布类型",
            prop: "fb_id",
            type: "cascader",
            cascader: {
              props: {
                checkStrictly: true,
                value: "id",
                label: "name",
                children: "children",
                lazy: true,
                lazyLoad(node, resolve) {
                  const { level } = node;
                  console.log("node", node);
                  if (level == 0) {
                    //第一级，获取分类
                    let arr = [];
                    AppUtil.request(
                      {
                        url: "/common/dataSelect/zsFl",
                      },
                      (res) => {
                        console.log("zsFl", res);

                        resolve(res.data);
                      }
                    );
                  } else {
                    AppUtil.request(
                      {
                        url: "/common/dataSelect/zzNameSelect?fl_id=" + node.value,
                      },
                      (res) => {
                        if (res.data && res.data.length > 0) {
                          res.data.map((val) => {
                            val.leaf = true;
                          });
                        } else {
                          node.data.disabled = true;
                          proxy.$message.error("此分类下没有资质名称");
                        }
                        resolve(res.data);
                      }
                    );
                  }
                },
              },
              placeholder: "请选择证书类型",
            },

          },
          //所需数量zs_num
          {
            label: "所需数量",
            prop: "zs_num",
            type: "input",
            input: {
              type: "text",
              placeholder: "请输入数量"
            }
          },
          {
            label: "价格类型",
            prop: "price_type",
            type: "select",

            select: {
              placeholder: "请选择价格类型",
              options: [],
              filterable: true,
              remote: true,
              loading: false,
              remoteMethod(query, val) {
                // console.log("remoteMethod", query, val);

                if (!val.options || !val.options.length) {
                  val.select.loading = true;
                  AppUtil.request(
                    {
                      url: "/common/dataSelect/rclpZsPriceTypeStateSelect",
                      method: "get",
                    },
                    (res: any) => {
                      val.options = val.select.options = res.data;
                      // console.log("remoteMethod", res.data)
                    },
                    (b) => {
                      val.select.loading = false;
                    }
                  );
                } else if (query) {
                  val.select.options = val.options.filter((val) => {
                    return val.name.includes(query);
                  });
                } else {
                  val.select.options = val.options;
                }
              },
            },
          },
          //价格 price
          {
            label: "价格",
            prop: "price",
            type: "input",
            input: {
              type: "text",
              placeholder: "请输入价格"
            }
          },
        ]
      },
      span: 24,
      value: []
    },
     *  select: {
            placeholder: "请选择福利",
            options: [],
            filterable: true,
            remote: true,
            loading: false,
            remoteMethod(query, val) {
              // console.log("remoteMethod", query, val);

              if (!val.options || !val.options.length) {
                val.select.loading = true;
                AppUtil.request(
                  {
                    url: "/common/dataSelect/rclpFbFlSelect",
                    method: "get",
                  },
                  (res: any) => {
                    val.options = val.select.options = res.data;
                    // console.log("remoteMethod", res.data)
                  },
                  (b) => {
                    val.select.loading = false;
                  }
                );
              } else if (query) {
                val.select.options = val.options.filter((val) => {
                  return val.name.includes(query);
                });
              } else {
                val.select.options = val.options;
              }
            },
          }, */
    editForm: [{} as any],

    formData: {} as any,
    defaultData: {} as any
  }
});
const { proxy } = getCurrentInstance() as any;
model.value.editForm.map(val => {
  model.value.defaultData[val.prop] = val.value;
  if (!model.value.formData[val.prop]) {
    model.value.formData[val.prop] = val.value;
  }
});
function validate(func: (valid: boolean) => void) {
  proxy?.$refs["form"].validate((v: any) => {
    func(v);
  });
}
defineExpose({
  validate
});
</script>
<template>
  <el-form
    ref="form"
    :model="model.formData"
    label-width="110px"
    label-position="right"
    style="width: 100%; padding-right: 2rem"
  >
    <el-row :gutter="0" class="row">
      <el-col
        v-for="(item, index) in model.editForm"
        :key="index"
        :span="item.span || 24"
        class="grid-cell"
      >
        <el-form-item
          v-if="!item.show || item.show()"
          :rules="item.rules"
          :label="item.label"
          :prop="item.prop"
          class="required label-right-align"
        >
          <el-input
            v-if="item.type == 'input'"
            v-model="model.formData[item.prop]"
            :type="item.input?.type || 'text'"
            :rows="item.input?.rows || 1"
            :maxlength="item.input?.maxlength || 1000"
            :show-word-limit="item.input?.maxlength > 0"
            :placeholder="item.input?.placeholder || ''"
            clearable
          />

          <el-select
            v-if="item.type == 'select'"
            v-model="model.formData[item.prop]"
            :multiple="item.select?.multiple || false"
            :placeholder="item.select?.placeholder"
            clearable
            :remote-method="q => item.select?.remoteMethod(q, item)"
            remote-show-suffix
            filterable
            :remote="item.select?.remote || false"
            :loading="item.select?.loading || false"
            @change="
              item.select?.change &&
                item.select.change(model.formData[item.prop])
            "
          >
            <el-option
              v-for="(item2, index2) in item.select.options"
              :key="index2"
              :label="item2.label || item2.name"
              :value="item2.value || item2.id"
            />
          </el-select>
          <el-date-picker
            v-if="item.type == 'date'"
            v-model="model.formData[item.prop]"
            style="width: 100%"
            :type="item.date.type || 'date'"
            :placeholder="item.date?.placeholder"
            :format="item.date?.format"
            :value-format="item.date?.valueFormat"
          />
          <uploads
            v-if="item.type === 'uploads'"
            v-model:file-list="item.upload!.fileArr"
            v-model="model.formData[item.prop]"
            :limit="item.upload!.limit || 3"
            :tip="item.upload!.tip || '可上传3张图片'"
          />
          <uploadOne
            v-else-if="item.type === 'uploadOne'"
            v-model:file-list="item.upload!.fileArr"
            v-model="model.formData[item.prop]"
            :tip="item.upload!.tip || ''"
          />
          <el-cascader
            v-else-if="item.type === 'cascader'"
            v-model="model.formData[item.prop]"
            style="width: 100%"
            :props="item.cascader.props"
            :options="item.cascader.options"
            clearable
            :placeholder="item.cascader.placeholder"
            :show-all-levels="item.cascader.showAllLevels || false"
          />
          <el-time-picker
            v-else-if="item.type === 'time'"
            v-model="model.formData[item.prop]"
            :placeholder="item.time.placeholder"
            :value-format="item.time?.valueFormat"
          />
          <!-- editor -->
          <editor
            v-else-if="item.type === 'editor'"
            v-model="model.formData[item.prop]"
            :height="item.editor?.height || 300"
            :placeholder="item.editor?.placeholder || '请输入内容'"
          />
          <div v-else-if="item.type === 'slot'">
            <slot
              :name="item.prop"
              :row="model.formData"
              :value="model.formData[item.prop]"
            />
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
